  <template>
  <div class="page-wrap">
    <div class="page-title">CdsMonthSlider 购买时长</div>
    <div class="page-sub-title">基本用法</div>
    <codeShow :code="code1">
      <CdsMonthSlider
        v-model="month"
        v-model:checkbox="checkbox"
        @change="sliderChange"
        :show-tooltip="false"
        :marks="marks"
        :startDate="`2023-12-02`"
        v-model:date="date"
        :desc="`为保证业务的正常运行，建议开启自动续约！开启自动续约后，下个计费周期（自然月）起始时将自动按当前设定的计费方式与规格自动完成续约。续约时需扣除相应费用，请确保账户余额充足。关闭自动续约后，到期时裸金属服务器将会被删除，数据无法找回。`"
      />
    </codeShow>
    <div class="page-sub-title">CdsMonthSlider API</div>
    <el-table :data="tableData" style="margin-top: 20px; margin-bottom: 48px">
      <el-table-column
        label="属性名"
        align="left"
        width="150"
        prop="attr"
      ></el-table-column>
      <el-table-column
        label="说明"
        align="left"
        prop="illustrate"
      ></el-table-column>
      <el-table-column
        label="类型"
        align="left"
        width="150"
        prop="type"
      ></el-table-column>
      <el-table-column
        label="默认值"
        align="left"
        width="150"
        prop="default"
      ></el-table-column>
    </el-table>
    <div class="page-sub-title">CdsMonthSlider 方法</div>
    <el-table :data="CdsMonthSliderFunTable" style="margin-top:20px;margin-bottom: 48px;">
        <el-table-column label="属性名" align="left" width="150" prop="attr"></el-table-column>
        <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, watch, defineAsyncComponent } from 'vue';
// import { CdsMonthSlider } from 'cds-ui-business-components'
import {CdsMonthSlider} from 'cds-ui-business-components';
import codeShow from '../../components/code.vue'
const month = ref(0);
const checkbox = ref(true);
const marks = ref({
  0: '月底',
  1: '1个月',
  2: '',
  3: '',
  4: '',
  5: '',
  6: '6个月',
  7: '',
  8: '',
  9: '9个月',
  10: '',
  11: '',
  12: '1年',
  13: '2年',
  14: '3年',
})
const date = ref();
const tableData = ref([
  {
    'attr': 'v-model', 'illustrate': '选择的时长（月）', 'type': 'Number', 'default': 0
  },
  {
    'attr': 'showDate', 'illustrate': '是否显示截至时间', 'type': 'Boolean', 'default': 'true'
  },
  {
    'attr': 'startDate', 'illustrate': '开始时间（YYY-MM-DD HH:mm:ss）', 'type': 'String', 'default': '当前时间'
  },
  {
    'attr': 'v-model:date', 'illustrate': '到期时间（YYY-MM-DD HH:mm:ss）', 'type': 'String', 'default': ''
  },
  {
    'attr': 'marks', 'illustrate': '滑块上显示的label和对应value', 'type': 'Object', 'default': 'null'
  },
  {
    'attr': 'show-tooltip', 'illustrate': '是否显示提示信息', 'type': 'Boolean', 'default': 'true'
  },
  {
    'attr': 'showCheckbox', 'illustrate': '是否显示checkbox', 'type': 'Boolean', 'default': 'true'
  },
  {
    'attr': 'v-model:checkbox', 'illustrate': 'checkbox的绑定值', 'type': 'Boolean', 'default': 'true'
  },
  {
    'attr': 'label', 'illustrate': 'checkbox的label', 'type': 'String', 'default': '开启自动续约'
  },
  {
    'attr': 'desc', 'illustrate': 'checkbox的后面的tip', 'type': 'String', 'default': ''
  },
])
const CdsMonthSliderFunTable = ref([
  { attr: 'change', illustrate: '值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）' }
])
const code1 = ` 
//template
  <CdsMonthSlider
      v-model="month"
      v-model:checkbox="checkbox"
      :marks="marks"
      :desc="'为保证业务的正常运行，建议开启自动续约！开启自动续约后，下个计费周期（自然月）起始时将自动按当前设定的计费方式与规格自动完成续约。续约时需扣除相应费用，请确保账户余额充足。关闭自动续约后，到期时裸金属服务器将会被删除，数据无法找回。'"
    />  
//script
import { CdsMonthSlider } from 'cds-ui-business-components'   
const month = ref(0);
const checkbox = ref(true);
const marks = ref({
  0: '月底',
  1: '1个月',
  2: '',
  3: '',
  4: '',
  5: '',
  6: '6个月',
  7: '',
  8: '',
  9: '9个月',
  10: '',
  11: '',
  12: '1年',
  13: '2年',
  14: '3年',
}) 
`;
const sliderChange = (val) => {
  console.log('val', val)
}
</script>

<style lang="scss" scoped>
</style>